<template>
  <div v-loading="loadingFollow" class="customerDetail-follow">
    <el-tabs v-model="activeIndex" @tab-click="handleSelectMenu">
      <el-tab-pane label="跟进" name="0"></el-tab-pane>
      <el-tab-pane label="旅程" name="1"></el-tab-pane>
      <el-tab-pane label="保单" name="2"></el-tab-pane>
      <el-tab-pane label="动态" name="3"></el-tab-pane>
    </el-tabs>
    <div class="main">
      <div v-if="activeIndex == 0" class="follow">
        <template v-if="followList.length > 0">
          <div class="top">
            <p>
              客户状态：<span>{{ msgCustomerState ? customerStateOpt[msgCustomerState] : null }}</span>
            </p>
            <p>创建时间：{{ followCreateTime }}</p>
          </div>
          <div v-for="(item, index) in followList" :key="item.id">
            <div class="preliminary-title">
              <img v-if="index == 0" alt="" src="@/assets/cutomer/preliminary.png"/>
              <img v-else alt="" src="@/assets/cutomer/finished.png"/>
              <div>
                {{ item.followState }}<span>{{ item.createTime }}</span>
              </div>
            </div>
            <div class="preliminary-main">
              <div :class="index == followList.length - 1 ? 'finish-line' : 'line'"></div>
              <div class="info-right">
                <div class="info">
                  <p>跟进时间：{{ item.followTime }}</p>
                  <p>跟进方式：{{ item.followWay }}</p>
                  <p>跟进人：{{ item.follower || '无' }}</p>
                  <p>跟进情况：{{ item.remark || '无' }}</p>
                  <p>跟进内容：{{ item.followContent || '无' }}</p>
                </div>
                <p v-if="item.fileName">
                  附件：
                  <el-link :href="item.enclosureUrl" target="_blank" type="primary">{{ item.fileName }}</el-link>
                </p>
              </div>
            </div>
          </div>
        </template>
        <template v-else>
          <el-empty description="暂无数据"></el-empty>
        </template>
      </div>
      <div v-if="activeIndex == 1" class="journey">
        <!-- 旅程 -->
        <template v-if="journeyList.length > 0">
          <div v-for="(item, index) in journeyList" :key="item.id">
            <div class="preliminary-title">
              <img alt="" src="@/assets/cutomer/finished.png"/>
              <div>
                {{ item.journeyStage }}<span>{{ item.journeyTime }}</span>
              </div>
            </div>
            <div class="preliminary-main">
              <div :class="index == journeyList.length - 1 ? 'finish-line' : 'line'"></div>
              <div class="info-right">
                <div class="info">
                  <!-- <p>回收方式：{{ item.journeyContent }}</p> -->
                  <p>{{ item.journeyContent }}</p>
                  <!-- <p v-if="item.addName">企微添加人：{{ item.addName }}</p> -->
                  <p>操作人：{{ item.updateBy }}</p>
                </div>
              </div>
            </div>
          </div>
        </template>
        <template v-else>
          <el-empty description="暂无数据"></el-empty>
        </template>
      </div>
      <div v-if="activeIndex == 2" class="policy">
        <div>
          <el-radio v-model="policyRadio" label="1">有效保单</el-radio>
          <el-divider direction="vertical"></el-divider>
          <el-radio v-model="policyRadio" label="2">历史保单</el-radio>
          <el-divider direction="vertical"></el-divider>
          <el-radio v-model="policyRadio" label="3">投保中单</el-radio>
        </div>
        <div v-if="policyRadio == 1">
          <PolicyInfo :policyList="validPolicyList" :policyRadio="policyRadio"></PolicyInfo>
        </div>
        <div v-else-if="policyRadio == 2">
          <PolicyInfo :policyList="validPolicyList" :policyRadio="policyRadio"></PolicyInfo>
        </div>
        <div v-else>
          <PolicyInfo :policyList="validPolicyList" :policyRadio="policyRadio"></PolicyInfo>
        </div>
      </div>
      <div v-if="activeIndex == 3" class="trajectory">
        <template v-if="trajectoryList.length > 0">
          <div v-for="item in trajectoryList" :key="item.trackDate" class="trajectoryList_item">
            <div class="trajectoryList_item_header">
              <div class="trajectoryList_item_header_dot">
                <div></div>
              </div>
              {{ item.trackDate }}
              {{ item.trackWeekDate }}
            </div>
            <div v-for="itm in item.trackList" :key="itm.createTime" class="trajectoryList_item_itm">
              <div class="trajectoryList_item_itm_left">
                <div class="trajectoryList_item_itm_left_time">{{ itm.createTime }}</div>
                <div class="finish-line">
                  <div v-if="itm.materialTitle || itm.browseDuration" class="finish_line_dot"></div>
                </div>
              </div>
              <div class="trajectoryList_item_itm_right">
                <div v-if="itm.event == '打开雷达'">
                  <div class="trajectoryList_item_itm_right_title">打开雷达</div>
                  <div class="trajectoryList_item_itm_right_info">
                    <span>{{ itm.materialTitle }}</span>
                  </div>
                </div>
                <div v-else class="info">
                  <div class="trajectoryList_item_itm_right_title">{{ itm.event }}</div>
                  <div class="trajectoryList_item_itm_right_info">
                    <p v-if="itm.materialTitle">标题：{{ itm.materialTitle }}</p>
                    <p v-if="itm.browseDuration">时长：{{ itm.browseDuration || 0 }}秒</p>
                    <!-- <p v-if="item.source">客户来源：{{ item.source }}</p> -->
                    <!-- <p>分享人：{{ item.name }}</p> -->
                  </div>
                </div>
              </div>
            </div>
          </div>
        </template>
        <template v-else>
          <el-empty description="暂无数据"></el-empty>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
import PolicyInfo from './PolicyInfo'
import { followId, journey } from '@/api/customer/customerManage'

export default {
  components: { PolicyInfo },
  props: {
    msgFollowId: {
      type: String,
      default: null
    },
    msgCustomerState: {
      type: String,
      default: null
    },
    msgFollower: {
      type: String,
      default: null
    },
    followStateList: {
      type: Array,
      default: null
    },
    msgUnionid: {
      type: String,
      default: null
    },
    msgRealPhone: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      id: this.$route.query.sid,
      loadingFollow: false,
      activeIndex: '0',
      activeName: '',
      policyRadio: '1',
      followList: [],
      followCreateTime: null,
      journeyList: [],
      trajectoryList: [],
      validPolicyList: [],
      historicalPolicyList: [],
      middlePolicyList: [],
      followWayList: [],
      followContentList: [],
      policyListOption: [
        { dictValue: 'PolAvailable', dictLabel: '有效' },
        { dictValue: 'PolInvalid', dictLabel: '失效' },
        { dictValue: 'PolTerminate', dictLabel: '终止' }
      ],
      customerStateOpt: {}
    }
  },
  mounted() {
    this.getDicts('follow_states').then((res) => {
      if (res.code === 200) {
        res.data.forEach(item => {
          this.customerStateOpt[item.dictValue] = item.dictLabel
        })
      }
    })
    this.getDicts('follow_way').then((res) => {
      if (res.code === 200) {
        this.followWayList = res.data
      }
    })
    this.getDicts('follow_content').then((res) => {
      if (res.code === 200) {
        this.followContentList = res.data
      }
    })
  },
  watch: {
    policyRadio() {
      this.getListBySid()
    },
    msgFollowId() {
      this.handleSelectMenu()
    }
  },
  methods: {
    // 菜单选择
    handleSelectMenu(key, keyPath) {
      this.getInfo()
    },
    getInfo() {
      if (this.activeIndex === '0') {
        this.getFollowId()
      } else if (this.activeIndex === '1') {
        this.journey()
      } else if (this.activeIndex === '2') {
        this.getListBySid()
      } else if (this.activeIndex === '3') {
        this.getCustomerTrack()
      }
    },
    getCustomerTrack() {
      //获取轨迹
      // const params = {
      //   unionid: this.msgUnionid,
      //   phone: this.msgRealPhone,
      // };
      // this.loadingFollow = true;
      // customerTrack(params).then((res) => {
      //   this.trajectoryList = [];
      //   if (res.code === 200) {
      //     this.trajectoryList = res.data || [];
      //     // this.trajectoryList.forEach((item, index) => {
      //     //   if (Number(index + 1) % 4 == 1) {
      //     //     item.icon = 'readActive'
      //     //   } else if (Number(index + 1) % 4 == 2) {
      //     //     item.icon = 'officialAccount'
      //     //   } else if (Number(index + 1) % 4 == 3) {
      //     //     item.icon = 'readBook'
      //     //   } else {
      //     //     item.icon = 'planBook'
      //     //   }
      //     // });
      //   }
      // }).catch(() => {
      //   this.trajectoryList = [];
      //   console.log('error');
      // }).finally(() => {
      //   this.loadingFollow = false;
      // })
      this.trajectoryList = [{
        trackDate: '2024-03-22',
        trackWeekDate: '星期五',
        trackList: [{
          createTime: '14:03:43',
          event: '打开雷达',
          materialTitle: '打开了智能雷达《买保险》',
          browseDuration: '10'
        }, {
          createTime: '10:41:31',
          event: '打开雷达',
          materialTitle: '打开了智能雷达《买保险》',
          browseDuration: '10'
        }]
      },
        {
          trackDate: '2024-01-31',
          trackWeekDate: '星期三',
          trackList: [{
            createTime: '14:09:00',
            event: '保全-申请办理'
          }, {
            createTime: '14:08:01',
            event: '打开公众号-微服务'
          }]
        },
        {
          trackDate: '2024-01-26',
          trackWeekDate: '星期五',
          trackList: [{
            createTime: '11:00:00',
            event: '打开公众号-微服务'
          }]
        }
      ]
    },
    getListBySid() {
      //获取保单
      // const params = {
      //   code: this.id,
      //   flag: this.policyRadio,
      // };
      // this.loadingFollow = true;
      // console.log(params);
      // getListBySid(params).then((res) => {
      //   if (res.code === 200) {
      //     this.validPolicyList = res.data.productVOList || [];
      //     this.validPolicyList.forEach(item => {
      //       item.stateType = this.selectDictLabel(this.policyListOption, item.stateType);
      //     });
      //   }
      // }).catch(() => {
      //   this.validPolicyList = [];
      //   console.log('error');
      // }).finally(() => {
      //   this.loadingFollow = false;
      // })
      let getData = []
      if (this.policyRadio == 1) {
        getData = {
          productVOList: [
            {
              productName: '人寿B款重大疾病保险',
              productCode: '123456',
              stateType: '有效',
              policyNo: '202104131****1999',
              cvalidate: '2021-04-13',
              insuYear: '30',
              payYears: '5',
              prem: '12000'
            },
            {
              productName: '人寿福寿年年年金保险',
              productCode: '123456',
              stateType: '有效',
              policyNo: '202104131****1999',
              cvalidate: '2021-04-13',
              insuYear: '20',
              payYears: '10',
              prem: '8000'
            }
          ]
        }
      } else {
        getData = {
          productVOList: []
        }
      }
      this.validPolicyList = getData.productVOList || []
    },
    getFollowId() {
      // 获取跟进信息
      if (!this.msgFollowId) return
      const params = {
        followId: this.msgFollowId
      }
      followId(params)
        .then((res) => {
          if (res.code === 200) {
            this.followList = res.data || []
            this.followList.forEach((element) => {
              element.followState = this.selectDictLabel(
                this.followStateList,
                element.followState
              )
              element.followWay = this.selectDictLabel(
                this.followWayList,
                element.followWay
              )
              let arr = element.followContent?.split(',')
              let str = ''
              arr.forEach((item) => {
                str += this.selectDictLabel(this.followContentList, item) + ','
              })
              element.followContent = str
              element['follower'] = this.msgFollower || ''
            })
            this.followCreateTime = this.followList[this.followList.length - 1]?.createTime || ''
          }
        })
        .catch(() => {
          console.log('error submit!!')
        })
    },
    // 旅程
    journey() {
      let params = {
        sid: this.$parent.id
      }
      journey(params)
        .then((res) => {
          if (res.code === 200) {
            console.log(res, '--------------res旅程')
            this.journeyList = res.data
          }
        })
        .catch(() => {
          console.log('error submit!!')
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.main {
  padding: 0 20px;
  max-height: 1432px;
  overflow-y: scroll;
}

.follow {
  .top {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    color: #2a2a2a;
    line-height: 20px;
    padding: 17px 0;

    span {
      color: #082aff;
    }
  }
}

.preliminary-title {
  display: flex;
  align-items: center;

  div {
    margin-left: 15px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    font-size: 16px;
    font-weight: 500;
    color: #2a2a2a;
    line-height: 22px;

    span {
      font-size: 14px;
      font-weight: 400;
      color: #cccccc;
      line-height: 16px;
    }
  }
}

.preliminary-main {
  display: flex;
  margin-top: 11px;
  margin-bottom: 15px;

  .line {
    width: 0;
    border-right: 1px dashed #cccccc;
    margin: 0 16px;
  }

  .finish-line {
    margin: 0 16px;
  }

  .info-right {
    width: 100%;
  }

  .info {
    background: #f6f6f6;
    border-radius: 2px;
    font-size: 14px;
    color: #999999;
    line-height: 20px;
    padding: 8px 0 10px 17px;
    margin-bottom: 10px;

    p {
      margin: 6px 0;
    }
  }
}

.customerDetail-follow {
  .svg-icon {
    width: 34px;
    height: 34px;
  }
}

.trajectory,
.journey {
  .info {
    background: #fff;
  }
}

.policy {
  font-size: 14px;
}

::v-deep {
  .el-radio__input {
    display: none;
  }
}

.trajectoryList_item {
  border-bottom: 1px solid #F5F5F5;
  padding: 10px;
}

.trajectoryList_item_header {
  height: 28px;
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #2A2A2A;
}

.trajectoryList_item_header_dot {
  width: 12px;
  height: 12px;
  background: rgba(252, 88, 49, 0.5);
  border-radius: 50%;
  margin-right: 8px;
  position: relative;

  div {
    position: absolute;
    width: 6px;
    height: 6px;
    background: #FC5831;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    margin-top: -3px;
    margin-left: -3px;
  }
}

.trajectoryList_item_itm {
  display: flex;
  margin-bottom: 10px;
}

.trajectoryList_item_itm_left {
  margin: 0 8px 0 20px;

  .finish-line {
    .finish_line_dot {
      width: 10px;
      height: 10px;
      background: rgb(252, 88, 49);
      border-radius: 50%;
      margin-left: 18px;
    }
  }
}

.trajectoryList_item_itm_left_time {
  color: #999999;
  line-height: 38px;
  width: 58px;
}

.trajectoryList_item_itm_right_title {
  line-height: 38px;
  color: #333333;
  font-size: 14px;
}


.trajectoryList_item_itm_right_info {
  line-height: 22px;
  color: #2A2A2A;
  font-size: 14px;
  padding-right: 30px;
  position: relative;

  &::before {
    content: "";
    display: block;
    width: 1px;
    //min-height: 22px;
    height: calc(100% - 8px);
    border-left: 1px dashed rgb(252, 88, 49);
    position: absolute;
    top: 10px;
    left: -43.5px;
    z-index: 100;
  }
}

.trajectoryList_item_itm_right > .info {
  line-height: 26px;
}
</style>
